<!DOCTYPE html>
<html lang="en">
  <head>
    <meta charset="UTF-8" />
    <meta name="viewport" content="width=device-width, initial-scale=1.0" />
    <title>Document</title>
  </head>
  <body>
    <div id="container"></div>

    <script src="jslib/mustache.js"></script>
    <script>
      var templateStr = `
            <ul>
                {{#arr}}
                    <li>
                        {{name}}的爱好是：
                        <ol>
                            {{#hobbies}} 
                                <li>{{.}}</li>
                            {{/hobbies}} 
                        </ol>
                    </li>    
                {{/arr}}
            </ul>
        `;

      var data = {
        arr: [
          { name: '小明', age: 12, hobbies: ['游泳', '羽毛球'] },
          { name: '小红', age: 11, hobbies: ['编程', '写作文', '看报纸'] },
          { name: '小强', age: 13, hobbies: ['打台球'] },
        ],
      };

      var domStr = Mustache.render(templateStr, data);

      var container = document.getElementById('container');
      container.innerHTML = domStr;
    </script>
  </body>
</html>
